<html>

<head>
<title>Learning WebGL &mdash; lesson 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../Libs/webgl-utils.js"></script>
<script type="text/javascript" src="../Libs/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="BallModel.js"></script>
<script type="text/javascript" src="RectModel.js"></script>
<script type="text/javascript" src="RampModel.js"></script>

<script id="normalshader-fs" type="x-shader/x-fragment">
    #ifdef GL_ES
    precision highp float;
    #endif

	varying vec4 vColor;
	
    void main(void) {
        gl_FragColor = vColor;
    }
</script>

<script id="normalshader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
	attribute vec4 aVertexColor;
	attribute vec3 aVertexNormal;
	
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

	varying vec4 vColor;
	
    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
		vec3 light = vec3(-2.0,-1.0,1.0);
		normalize(light);
		
		vec3 a = normalize(aVertexNormal);
		
		float prod = max(0.0, acos(dot(a, light)));
		prod = 0.318309886 * prod;
		
		vColor = vec4(	prod * prod,
						prod * prod * prod * prod * prod * prod,
						prod * prod * prod * prod * prod,
						1.0);
    }
</script>


<script type="text/javascript">
	var gl;
    function initGL(canvas) {
        try {
            gl = canvas.getContext("experimental-webgl");
            gl.viewportWidth = canvas.width;
            gl.viewportHeight = canvas.height;
        } catch (e) {
        }
        if (!gl) {
            alert("Could not initialise WebGL, sorry :-(");
        }
    }

	//Gotten from...
	function getShader(gl, id) {
        var shaderScript = document.getElementById(id);
        if (!shaderScript) {
            return null;
        }

        var str = "";
        var k = shaderScript.firstChild;
        while (k) {
            if (k.nodeType == 3) {
                str += k.textContent;
            }
            k = k.nextSibling;
        }

        var shader;
        if (shaderScript.type == "x-shader/x-fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        } else if (shaderScript.type == "x-shader/x-vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
        } else {
            return null;
        }

        gl.shaderSource(shader, str);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert(gl.getShaderInfoLog(shader));
            return null;
        }

        return shader;
    }

	var shaderProgram;
	
    function initShaders(fragmentShader, vertexShader) {

        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }

        gl.useProgram(shaderProgram);

        shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
        gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

		shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
		gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
		
		shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
		gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);
		
        shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
        shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    }
	
	var rect;
	var ball1;
	var ramp;
    function webGLStart() {
        var canvas = document.getElementById("canvas");
        initGL(canvas);
		initShaders(getShader(gl, "normalshader-fs"), getShader(gl, "normalshader-vs"));
		
		ball1 = new BallModel();
		ball1.create();
        ball1.initBuffers();
        
		rect = new RectModel(10.0, 10.0);
		rect.create();
        rect.initBuffers();
		
		ramp = new RampModel(10.0, 10.0);
		ramp.create(function(x){return x * x;}, 20.0);
		//ramp.scale = 5.0;
		
		ramp.initBuffers();
		
		return setInterval(masterDraw, 30);
        
    }
	
	var camera = mat4.create();
	var tick = 0;
	function masterDraw(){
		console.log(tick);
		tick += 1.0 / 120.0;
		tick = tick % (Math.PI * 2.0);
		gl.clearColor(1.0, 1.0, 1.0, 1.0);
        gl.enable(gl.DEPTH_TEST);
		
		//Camera
		mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, camera);
		mat4.rotateY(camera, tick, camera);
		
		mat4.translate(camera, vec3.create([-20 * Math.sin(tick + (Math.PI)),0.0, -20.0 * Math.cos(tick)]), camera);
		
		gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
		
		//ball1.move();
        //ball1.draw(camera, shaderProgram);
		
		//rect.move();
        //rect.draw(camera, shaderProgram);
		
		ramp.move();
		ramp.draw(camera, shaderProgram);
	}


</script>


</head>


<body onload="webGLStart();">
    <canvas id="canvas" style="border: none;" width="1280" height="640"></canvas>

</body>

</html>